<template>
    <div class="container">
        <v-container>
            <h4 class="mb-3">APP用户管理</h4>

            <v-row align="center">
                <v-col :md="2" :sm="6">
                    <AutocompleteUser label="姓名" v-model="queryName" item-text="name"></AutocompleteUser>
                </v-col>
                <v-col :md="2" :sm="6">
                    <AutocompleteUser label="手机号" v-model="queryMobile" item-text="mobile"></AutocompleteUser>
                </v-col>

                <v-col :md="2" :sm="6">
                    <v-text-field label="邀约人" v-model="queryParent" ></v-text-field>
                </v-col>

                <v-col :md="2" :sm="6">
                    <v-select :items="kycItem"  clearable v-model="queryKyc" label="认证"> </v-select>
                </v-col>



                <v-col :md="4" :sm="6">
                    <v-btn
                        dark
                        class="mb-2 mr-2"
                        @click="query()"
                    >查询
                    </v-btn>

                    <v-btn
                        dark
                        class="mb-2 mr-2"
                        @click="reset()"
                    >重置
                    </v-btn>


                    <v-btn
                        dark
                        class="mb-2 mr-2"
                        @click="createUserdialog = true"
                    >创建新用户
                    </v-btn>

                </v-col>
            </v-row>
        </v-container>




        <v-data-table
            item-key="id"
            :headers="headers"
            :items="items"
            class="elevation-1"
            no-data-text="没有数据..."
            :page.sync="pageNo"
            :items-per-page="pageSize"
            hide-default-footer
        >
             <template v-slot:[`item.id`]="{ item }">
                <router-link :to="`/app/user/${item.id}`" class="text-decoration-none">{{item.id}}</router-link>
            </template>

            <template v-slot:[`item.parent`]="{ item }">
                <div v-if="item.parent">
                    <v-btn
                        small
                        color="primary"
                        @click="openInviterDialog(item)"
                    >
                        {{item.parent.name}}
                    </v-btn>
                    <br>{{item.parent.mobile}}</div>
                <div v-else>
                    <v-btn
                        small
                        color="primary"
                        @click="openInviterDialog(item)"
                    >
                       添加邀约人
                    </v-btn>
                </div>
            </template>


            <template v-slot:[`item.actions`]="{ item }">
                <v-btn  small depressed :to="`/app/user/${item.id}`">详情</v-btn>
            </template>

            <template v-slot:[`item.kyc_name`]="{ item }">
               <span  class="red--text" v-if="item.kyc == 1">
                    {{item.kyc_name}}
               </span>
               <span v-else>
                    {{item.kyc_name}}
               </span>
            </template>

        </v-data-table>

        <v-row v-if="items.length > 0 && totalPage >= 1" class="mt-2">
            <v-col cols="12">
                <v-pagination
                    v-model="pageNo"
                    :length="totalPage"
                    :total-visible="7"
                    @input="onPageChange"
                ></v-pagination>
            </v-col>
        </v-row>

        <v-dialog
            v-model="inviterDialog"
            max-width="600px"
        >
            <v-card>
                    <v-card-title>选择邀请人</v-card-title>
                    <v-card-text>
                        <!-- 邀请人选择列表 -->
<!--                        <v-select-->
<!--                            v-model="selectedInviter"-->
<!--                            :items="user_list"-->
<!--                            label="选择邀请人"-->
<!--                        ></v-select>-->


                        <AutocompleteUser label="选择邀请人" v-model="selectedInviter" item-text="name"></AutocompleteUser>

                    </v-card-text>
                    <v-card-actions>
                        <!-- 取消按钮 -->
                        <v-btn
                            text
                            @click="inviterDialog = false"
                        >
                            取消
                        </v-btn>
                        <!-- 确认按钮 -->
                        <v-btn
                            text
                            color="primary"
                            @click="saveInviter()"
                        >
                            确认
                        </v-btn>
                    </v-card-actions>
                </v-card>
        </v-dialog>

        <v-dialog v-model="createUserdialog" max-width="500px">
            <v-card>
                <v-card-title>创建新用户</v-card-title>
                <v-card-text>
                    <!-- 用户名输入框 -->
                    <v-text-field
                        v-model="username"
                        label="用户名"
                        required
                    ></v-text-field>
                    <!-- 手机号输入框 -->
                    <v-text-field
                        v-model="mobile"
                        label="手机号"
                        type="tel"
                        required
                    ></v-text-field>
                </v-card-text>
                <v-card-actions>
                    <!-- 取消按钮 -->
                    <v-btn text @click="createUserdialog = false">取消</v-btn>
                    <!-- 注册按钮 -->
                    <v-btn text @click="registerUser">注册</v-btn>
                </v-card-actions>
            </v-card>
        </v-dialog>
    </div>

</template>

<script>
    import axios from "axios";
    import AutocompleteOrg from "../../widgets/AutocompleteOrg.vue";
    import AutocompleteUser from "../../widgets/AutocompleteUser.vue";
    import { mapGetters } from 'vuex';

    export default {
        data: () => ({
            headers: [
                { text: '序号', value: 'id' },
                { text: '姓名', value: 'name' },
                { text: '手机号', value: 'mobile' },
                { text: '邀约人', value: 'parent' },
                { text: '金币余额', value: 'ticket' },
                { text: '账户余额', value: 'money' },
                { text: '性别', value: 'gender_name' },
                { text: '认证', value: 'kyc_name' },
                { text: '注册时间', value: 'created_at' },
                { text: '操作', value: 'actions', sortable: false },
            ],
            createUserdialog: false, // 控制对话框的显示与隐藏
            username: '', // 存储用户名
            mobile: '', // 存储手机号
            items: [],
            pageNo: 1,
            pageSize: 20,
            totalPage: 0,
            rules: {
                required: value => !!value || '必填',
                size: v => (v && v.length >= 2) || '最少2个字符',
            },
            queryName: null,
            queryMobile: null,
            queryParent: null,
            queryKyc: null,
            statusItem: [
                { value: 1, text: '正常' },
                { value: 2, text: '休假' },
                { value: 3, text: '离职' },
            ],
            genderItem: [
                { value: 1, text: '男' },
                { value: 2, text: '女' },
            ],
            kycItem: [
                { value: -1, text: '认证失败' },
                { value: '00', text: '未认证' },
                { value: 1, text: '申请中' },
                { value: 2, text: '认证成功' },
            ],

            user_list: [],
            user_id:'',
            selectedInviter: null,


            allInviters: ['张三', '李四', '王五', '赵六'],
            inviterDialog: false,
            currentItem: null,
        }),


        components: {
            AutocompleteOrg: AutocompleteOrg,
            AutocompleteUser: AutocompleteUser,
        },

        computed: {
            ...mapGetters([
                'is_supper',
                'is_manager'
            ]),
        },

        created() {
            this.loadList();
        },
        methods: {
            // 打开选择邀请人的对话框
            openInviterDialog(item) {
                this.user_id = item.id;
                this.inviterDialog = true;
            },
            // 保存选择的邀请人
            saveInviter() {
                this.loading = true;
                const that = this;
                const params = Object.entries({
                    user_id: this.user_id,
                    parent_id: this.selectedInviter.id
                }).reduce((a,[k,v]) => (v ? (a[k]=v, a) : a), {});
                axios.post(`/user/saveInviter`,params).then((response) => {
                    this.inviterDialog = false;
                    this.loadList();
                })
                    .catch(function () {})
                    .then(function () {
                        that.loading = false;
                    });

            },
            registerUser() {
                this.loading = true;
                const params = Object.entries({
                    name: this.username,
                    mobile: this.mobile
                }).reduce((a,[k,v]) => (v ? (a[k]=v, a) : a), {});
                axios.get(`/user/createUser`, {
                    params: params
                }).then((response) => {
                    if(response.data.code === 0){
                        this.$toast.success('注册成功')
                        this.createUserdialog = false;
                        this.loadList();
                    }else {
                        this.$toast.error(response.data.msg)
                    }
                });
            },
            loadList() {
                this.loading = true;
                const that = this;
                const params = Object.entries({
                    pageSize: this.pageSize,
                    page: this.pageNo,
                    name: this.queryName ? this.queryName.name : '',
                    mobile: this.queryMobile ? this.queryMobile.mobile : '',
                    parent: this.queryParent ? this.queryParent : '',
                    kyc: this.queryKyc ? this.queryKyc : null,
                }).reduce((a,[k,v]) => (v ? (a[k]=v, a) : a), {});

                axios.get(`/user/app`, {
                    params: params
                }).then((response) => {
                    if(response.data.data.length >= 0) {
                        this.items = response.data.data;
                        this.totalPage = response.data.last_page;
                    }
                })
                    .catch(function () {})
                    .then(function () {
                        that.loading = false;
                    });
            },

            onPageChange() {
                this.loadList();
            },

            query() {
                this.pageNo = 1;
                this.loadList();
            },

            reset() {
                this.queryName = null;
                this.queryMobile = null;
                this.queryKyc = null;
                this.pageNo = 1;
                this.loadList();
            },
        }
    }
</script>
